<template>
	<view>
		<view class="order_list_wrap" v-if="orderList.length != 0">
<!--			<view class="jianbian"></view>-->
			<view class="order_list_item" v-for="(item,index) in orderList" :key="index">
				<view class="order_title u-flex">
					<view class="shop_title u-flex">
						<image src="/static/images/Frame.png"></image>
						<text class="text-Omit">{{item.shop_name}}</text>
					</view>
					<view class="status">

						<!--
							1待付款
							2已付款
							3已核验（等待上传）
							4待审核（已上传）
							5已完成
							-1已取消(超时、自动)
							-2已驳回（审核失败）
							-3已退款（金额原路返回）
						-->
						<text class="color1" v-if="item.status == 1">待付款</text>
						<text class="color1" v-if="item.status == 2">待核销</text>
						<text class="color1" v-if="item.status == 3">已核销，待上传笔记</text>
						<text class="color1" v-if="item.status == 4">审核中</text>
						<text class="color2" v-if="item.status == 5">已完成</text>
						<text class="color2" v-if="item.status == 6">审核通过</text>
						<text class="color1" v-if="item.status == -1">已取消</text>
						<text class="color1" v-if="item.status == -2">已驳回</text>
						<text class="color1" v-if="item.status == -3">已退款</text>

					</view>
				</view>
				<view class="goods_info u-flex">
					<view class="goods_img">
						<image :src="packageimage(item.package_images)" mode="aspectFill"></image>
					</view>
					<view class="goods_name">
						<view>{{item.package_name}}</view>
						<view>下单时间：{{item.create_time}}</view>
<!--						<view v-if="item.status == 3">-->
<!--							核销时间：{{item.verify_time}}-->
<!--						</view>-->
						<view v-if="item.reservation_start_time">
							预约时间：{{timestamp(item.reservation_start_time)}}-{{timestamp2(item.reservation_end_time)}}
						</view>
					</view>
				</view>
				<view class="order_btnzu u-flex">
					<view class="right_zu u-flex" v-if="item.status == 2 || item.status == 3">
						<view class="kongxin" @click="lxdaren(item)">服务专员</view>
						<view class="shise" @click="lookBiTc(item)">查看套餐</view>
					</view>
					<view class="right_zu u-flex" v-else-if="item.status == 5 || item.status == 6">
						<view class="kongxin" @click="lookBiJi(item)">查看笔记</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="noDatas">
			<u-empty text="暂无订单" mode="favor" icon-size="106"></u-empty>
		</view>


		<!-- 查看笔记 -->
		<u-popup v-model="LookBiJiShow" mode="bottom" border-radius="34">
			<view class="lookbiji_wrap">
				<view class="popup_title">查看笔记</view>
				<view class="loobbiji_info">
					<view class="url_wrap">
						<view class="lookbiji_url u-flex">
							<view>笔记链接<span>（请复制到浏览器查看）</span></view>
							<view @click="FuhiUrl()">复制</view>
						</view>
						<view class="url_address">{{BiJiInfoData.url || '暂无链接'}}</view>
					</view>
					<view class="bijijietu">
						<view class="bjjttitle">笔记截图</view>
						<u-row gutter="20">
							<u-col span="4" v-for="(item,index) in BiJiInfoData.images" :key="index"
								@tap.stop="showPic(BiJiInfoData.images,index)">
								<view class="demo-layout">
									<image :src="item" mode="aspectFill"></image>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 查看笔记 -->
		<u-popup v-model="LookTaoCanShow" mode="bottom" border-radius="34">
			<view class="lookbiji_wrap">
				<view class="details_info3">
					<view class="title">套餐详情</view>
					<view class="list_info_wrap" v-if="TaoCanDetails.length != 0">
						<view class="list_item" v-for="(itemg,indexg) in TaoCanDetails" :key="indexg">
							<view class="fucai"><span></span>{{itemg.name}}</view>
							<view class="zicai_wrap">
								<view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
									<view>{{items.name}}</view>
									<view>（{{items.num || '0'}}份）</view>
									<view>¥{{items.price || '0.00'}}</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "home-orderlist",
		props: {
			orderList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				BiJiInfoData: {},
				LookBiJiShow: false,
				TaoCanDetails: [],
				LookTaoCanShow: false
			};
		},
		created() {

		},
		methods: {
			packageimage(data) {
				return data[0]
			},
			lookBiJi(data) {
				console.log('查看笔记', data);
				this.LookBiJiShow = true
				this.BiJiInfoData = data
			},
			lookBiTc(data) {
				console.log('查看套餐', data);
				let that = this
				that.$u.post('/shop/order/details', {
					order_id: data.id
				}).then(res => {
					console.log('订单详情', res);
					that.LookTaoCanShow = true
					that.TaoCanDetails = res.result.package.goods
				}).catch(err => {});
			},
			lxdaren(data) {
				console.log('查看达人', data);
				let that = this
				that.$u.post('/shop/order/details', {
					order_id: data.id
				}).then(res => {
					console.log('订单详情', res);

					uni.makePhoneCall({
						// 手机号
						phoneNumber: res.result.user.username,
						// 成功回调
						success: (res) => {
							console.log('调用成功!', res)
						},
						// 失败回调
						fail: (err) => {
							console.log('调用失败!', err)
						}
					});

				}).catch(err => {});
			},
			FuhiUrl() {
				uni.setClipboardData({
					data: this.BiJiInfoData.url, // e是你要保存的内容
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			// 预览图片
			showPic(msglist, index) {
				uni.previewImage({
					indicator: "number",
					current: index,
					urls: msglist
				});
			},
			calculateWeekday(dates) {
				this.errorMsg = ''
				const dateObj = new Date(dates)

				// 验证日期有效性
				// if (isNaN(dateObj.getTime())) {
				// 	this.errorMsg = '无效的日期格式'
				// 	this.weekdayResult = ''
				// 	return
				// }

				// 定义星期映射表（可扩展多语言）
				const weekdays = [
					'星期日', '星期一', '星期二',
					'星期三', '星期四', '星期五', '星期六'
				]

				// 获取星期索引
				const dayIndex = dateObj.getDay()

				return weekdays[dayIndex] || '--'
			},
			timestamp(dates) {
				const dateStr = dates;
				const [datePart, timePart] = dateStr.split(' ');
				const [y, m, d, h, min, s] = [...datePart.split('-'), ...timePart.split(':')].map(Number);
				
				let times = new Date(y, m - 1, d, h, min, s).getTime();
				
				let date1 = this.$u.date(times, 'yyyy-mm-dd hh:MM:ss')//显示2025-02-26 17:08:52
				let date2 = this.$u.date(times, 'yyyy-mm-dd')//显示2025-02-26
				let date3 = this.$u.date(times, 'mm-dd')//显示02-26
				let date4 = this.$u.date(times, 'hh:MM')//显示17:08
				let zhouji = this.calculateWeekday(date2)//算出周几
				
				return date3 + ' ' + zhouji + ' ' + date4
			},
			timestamp2(dates) {
				const dateStr = dates;
				const [datePart, timePart] = dateStr.split(' ');
				const [y, m, d, h, min, s] = [...datePart.split('-'), ...timePart.split(':')].map(Number);
				
				let times = new Date(y, m - 1, d, h, min, s).getTime();
				
				//let date1 = this.$u.date(times, 'yyyy-mm-dd hh:MM:ss')//显示2025-02-26 17:08:52
				//let date2 = this.$u.date(times, 'yyyy-mm-dd')//显示2025-02-26
				//let date3 = this.$u.date(times, 'mm-dd')//显示02-26
				let date4 = this.$u.date(times, 'hh:MM')//显示17:08
				//let zhouji = this.calculateWeekday(date2)//算出周几
				
				return date4
			},










		}
	}
</script>

<style lang="scss">
	.noDatas {
		padding-top: 100rpx;
	}

	.order_list_wrap {
		padding: 30rpx;
		background-image: linear-gradient(to top, #F4F4F4, #F4F4F4);
		position: relative;

		.jianbian {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 300rpx;
			background-image: linear-gradient(to top, #F4F4F4, #ffffff);
		}

		.order_list_item {
			position: relative;
			z-index: 2;
			margin-bottom: 30rpx;
			border-radius: 24rpx;
			padding: 24rpx;
			background-color: #ffffff;

			.order_title {
				align-items: center;
				justify-content: space-between;

				.shop_title {
					align-items: center;
					flex: 1;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}

					text {
						color: #999;
						font-size: 28rpx;
						word-break:break-all;
						display:-webkit-box;
						-webkit-line-clamp:1;
						-webkit-box-orient:vertical;
						overflow:hidden;
					}
				}

				.status {
					text-align: right;
					font-size: 28rpx;

					.color1 {
						color: #FF4E0D;
					}

					.color2 {
						color: #00AA3B;
					}
				}
			}

			.goods_info {
				align-items: flex-start;
				margin-top: 34rpx;

				.goods_img {
					width: 144rpx;
					height: 144rpx;

					image {
						width: 144rpx;
						height: 144rpx;
						border-radius: 16rpx;
						background-color: #F4F4F4;
					}
				}

				.goods_name {
					padding-left: 16rpx;
					flex: 1;
					margin-bottom: 24rpx;

					view:nth-child(1) {
						font-weight: bold;
						color: #333;
						font-size: 30rpx;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					view:nth-child(2) {
						color: #666;
					}

					view:nth-child(3) {
						align-items: center;
						justify-content: space-between;
						color: #666;
						flex: 1;

						span {
							color: #333;
							font-size: 28rpx;
						}
					}
				}
			}

			.bohui_yin {
				border-radius: 16rpx;
				padding: 20rpx;
				background-color: #FCF0ED;
				margin-bottom: 24rpx;
				align-items: flex-start;

				view:nth-child(1) {
					color: #FF4E0D;
				}

				view:nth-child(2) {
					color: #666;
					flex: 1;
				}
			}

			.order_btnzu {
				align-items: center;
				justify-content: space-between;

				.lxkf {
					flex: 1;
					align-items: center;
					color: #333;
					font-size: 28rpx;
				}

				.lxkefu {
					font-size: 28rpx;
					height: 40rpx;

					/deep/ button {
						background-color: transparent !important;
						padding: 0 !important;
						margin: 0 !important;
						line-height: 40rpx !important;
						height: 40rpx;
						font-size: 24rpx !important;
						color: #333333 !important;
					}

					/deep/ button::after {
						border: none !important;
					}
				}

				.right_zu {
					margin-left: auto;

					.kongxin {
						border-radius: 200rpx;
						width: 144rpx;
						height: 56rpx;
						line-height: 56rpx;
						border: 1px solid #FF4E0D;
						color: #FF4E0D;
						text-align: center;
						font-size: 28rpx;
					}

					.shise {
						background-color: #FF4E0D;
						border-radius: 200rpx;
						width: 144rpx;
						height: 56rpx;
						line-height: 56rpx;
						border: 1px solid #FF4E0D;
						color: #ffffff;
						text-align: center;
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
  //套餐详情
	.lookbiji_wrap {
		padding: 30rpx;
		background-color: #F4F4F4;

		.popup_title {
			font-weight: bold;
			font-size: 34rpx;
			text-align: center;
		}

		.loobbiji_info {
			.url_wrap {
				background-color: #ffffff;
				padding: 24rpx;
				margin: 24rpx auto;
				border-radius: 24rpx;

				.lookbiji_url {
					align-items: center;
					justify-content: space-between;

					view:nth-child(1) {
						font-weight: bold;
						font-size: 32rpx;

						span {
							font-size: 26rpx;
							font-weight: initial;
							color: #666666;
						}
					}

					view:nth-child(2) {
						background-color: #FF4E0D;
						border-radius: 200rpx;
						color: #ffffff;
						width: 120rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
					}
				}

				.url_address {
					color: #f00;
					margin-top: 12rpx;
					text-decoration: underline;
				}
			}

			.bijijietu {
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				border-radius: 24rpx;

				.bjjttitle {
					font-size: 32rpx;
					font-weight: bold;
					padding: 14rpx 10rpx 10rpx 10rpx;
				}

				.demo-layout {
					margin-top: 20rpx;

					image {
						width: 100%;
						height: 200rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.details_info3 {
		padding: 32rpx 28rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		margin: 30rpx 0;

		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			width: 200rpx;
			height: 54rpx;
			margin-bottom: 28rpx;
		}

		.list_info_wrap {
			align-items: center;
			padding: 0 22rpx 0 22rpx;
			margin-top: 20rpx;

			.list_tile {
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;

				span {
					display: inline-block;
					width: 6rpx;
					height: 6rpx;
					border-radius: 200rpx;
					background-color: #999;
					margin-right: 10rpx;
				}
			}

			.list_item {
				align-items: flex-start;
				margin-top: 20rpx;
				padding-left: 0;

				.fucai {
					font-size: 28rpx;
					color: #333;
					flex: 1;
					font-weight: bold;

					span {
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background-color: #d4d4d4;
						border-radius: 200rpx;
						margin-right: 14rpx;
					}
				}

				.zicai_wrap {
					padding-left: 22rpx;
				}

				.zicai {
					margin-top: 12rpx;

					view:nth-child(1) {
						font-size: 28rpx;
						color: #666;
						flex: 1;
					}

					view:nth-child(2) {
						font-size: 28rpx;
						color: #666;
						margin-left: auto;
					}

					view:nth-child(3) {
						font-size: 28rpx;
						color: #666;
						font-weight: bold;
						margin-left: auto;
					}
				}
			}
		}
	}
</style>